<template>
  <el-table :data="data" border max-height="500" style="width: 100%" :default-sort="{order:'descending'}" >
   
   <el-table-column v-for="(item,index) in tableData" :fixed="index<2" v-if="item.name!=='操作'&&item.type!=='index'" :show-overflow-tooltip="true" :sortable="item.prop=='number'" :prop="item.prop" :label="item.name" :type="item.type" :min-width="item.width||'100'" align="center">
     <template slot-scope="scope">
       <div>
         <p v-if="!scope.row.edit" class="white-space" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</p>
         <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入内容"></el-input>
       </div>
     </template>
   </el-table-column>
   <el-table-column v-else-if="item.type=='index'" :label="item.name" type="index" :width="80" fixed="left"></el-table-column>

   <el-table-column v-else-if="item.name=='操作'" :label="item.name" :width="150" align="center" fixed="right" >
     <template slot-scope="scope">
        <div>
          <span v-if="path!=='/teacherManage/info'" :class="{'my-btn':true,'edit-btn':scope.row.sta==null}" @click="checkInfo(scope)">{{scope.row.sta|formaltSta}}</span>
          <p class="btns-box" v-if="path=='/teacherManage/info'">
            <span class="edit-btn" @click="showDetail(scope)">查看</span>
            <span @click="startThis(scope)" :class="{'edit-btn':!scope.row.edit,'color-red':scope.row.edit}">{{scope.row.edit==undefined?"编辑":"保存"}}</span>
            <span v-show="scope.row.sta=='0'" class="edit-btn" @click="checked(scope)">审核</span>
          </p>
          <p class="btns-box" v-else-if="path=='/privilege'">
            <span v-for="(btn, btnIndex) in btns" v-show="btn.show" :key="btnIndex" @click="btn.click(scope,btns,btn)" :class="btn.className">{{btn.label}}</span>
          </p>
        </div>
     </template>
   </el-table-column>
  </el-table>
</template>
<script>
export default {
  props:["data","tableData","table","delUrl","type"],
  components: {},
  name: "",
  data() {
    return {
      path:"",

      btns:[],
      btnsData:[
        {
          path:"/teacherManage/info",
          data:[
            {label:"编辑",className:{'edit-btn':true},show:true,click:this.startEdit},
            {label:"保存",className:{'color-red':true},show:false,click:this.saveEdit}
          ]
        },{
          path:"/privilege",
          data:[
            {label:"编辑",className:{'edit-btn':true},show:true,click:this.startEdit},
            {label:"删除",className:{'color-red':true},show:true,click:this.del}
          ]
        }
      ]
    };
  },
  computed: {
    
  },
  filters:{
    formaltSta(val){
      return val===null?"待审核":["不通过","通过"][val]
    }
  },
  methods: {
    checkInfo(scope){
      const sta=scope.row.sta
      if(sta == null){
        this.$store.state.examine.show=true
        this.$store.state.examine.info=scope.row
      }
    },

    /**
     * @name 开始编辑
     */
    startEdit(scope,btnArray,btn){
      var path = _g.getRouterPath(this)
      switch(path){
        case "/teacherManage/info":scope.row.edit=true;btnArray.forEach(ele=>{ele.show=true});this.$set(btn,"show",false);break;
        case "/privilege":this.$store.state.dia.privilege.isAdd=false;this.$store.state.dia.privilege.show=true;this.$store.state.dia.privilege.number=scope.row.number;break;
      }
    },

    startThis(scope){
      if(scope.row.edit!==true){
        this.$set(scope.row,"edit",true)
      }else{
        this.saveEdit(scope,)
      }
    },

    del(scope){
      var path = _g.getRouterPath(this)
      var url=""
      var params={
        number:scope.row.number
      }
      switch(path){
        case "/privilege": url="auth/del";break;
      }

      _g.apiPost(url,params).then(res=>{
        _g.toastMsg(res.error?"error":"success",res.msg)
        bus.$emit("reflash")
      })
    },

    /**
     * @name 保存编辑
     */
    saveEdit(scope,btnArray,btn){
      this.edit=false
      // btnArray.forEach(ele=>{ele.show=true})
      // this.$set(btn,"show",false)
      _g.apiPost("teacherinfo/save",scope.row).then(res=>{
        _g.toastMsg(res.error?"error":"success",res.msg)
        this.$set(scope.row,"edit",undefined)
      })
    },

    /**
     * @name 查看详情
     */
    showDetail(scope){
      console.log("查看详情")
      this.$store.state.dia.center.info=scope.row
      this.$router.push("/teacherManage/info/detail/"+scope.row.number)
    },

    getBtns(){
      var path = _g.getRouterPath(this)
      this.btns=this.btnsData.find(val=>val.path==path)?this.btnsData.find(val=>val.path==path).data:[]
    },

    /**
     * @name 审核
     */
    checked(scope){
      if(scope.row.sta==0){
        this.$store.state.examine.show=true
        this.$store.state.examine.info={...scope.row}
      }
    }
    
  },
  created() {
    this.path=_g.getRouterPath(this)
    this.getBtns()
  }
};
</script>
<style scoped>
.my-btn{
  cursor: pointer;
}
.my-btn:hover{
  opacity: .8;
}
.delete-btn{
  color: rgb(255, 102, 0);
  cursor: pointer;
}
.edit-btn{
  color: rgb(0, 153, 255);
  cursor: pointer;
}
.other-files{
  color:rgb(0, 153, 255);
  display:block;
}
.other-files:hover{
  text-decoration: underline;
}

.color-red{
  color: red;
  cursor: pointer;
}
.btns-box{
  display: flex;
  justify-content: space-around
}
</style>